<template>
  <div v-loading="loading" align="center">
    <el-row v-show="tradition" :gutter="40" class="gl_mt_30">
      <el-col :span="10">
        <el-form ref="refTradition" class="gl_form_mini" :model="tradition" label-width="100px">
          <template v-for="(item, key, index) in tradition">
            <el-form-item
              :key="index"
              :label="`${item.name}`"
              :prop="`.${key}.point`"
              size="mini"
              :rules="[
                { required: true, message: `${item.name}的积分不能为空`, trigger: 'blur' },
                { pattern: /^\+?(:?(:?\d+\.\d+)|(:?\d+))$/, message: '积分只能为非负数'}
              ]"
            >
              <el-input v-model="item.point" clearable :placeholder="`请输入${item.name}的积分`" />
            </el-form-item>
          </template>
        </el-form>
        <el-button type="primary" size="mini" :loading="submitLoading" style="width: 120px;" @click="handleSubmitTeamScore">提交</el-button>
      </el-col>
    </el-row>
    <div v-show="!tradition" style="line-height: 400px" class="gl_noData_mockTable">
      <p>暂无数据</p>
    </div>
  </div>
</template>
<script>
import {
  api_PUT_EventsManagementPointSetting, // 新建或更新赛事积分
  api_GET_EventsManagementPointSetting // 获取赛事积分列表
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'Tradition',
  props: {
    levelId: {
      required: true,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tradition: {},
      submitPointSettingInput: [],
      loading: false,
      submitLoading: false
    };
  },
  watch: {
    levelId: {
      handler (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.getPointSetting();
        }
      }
    }
  },
  created() {
    if (this.levelId) {
      this.getPointSetting();
    }
  },
  methods: {
    // 获取积分设置
    getPointSetting() {
      this.loading = true;
      api_GET_EventsManagementPointSetting({ CompetitionId: this.$route.params.parentId, CompetitionLevelId: this.levelId }).then(res => {
        this.processDisplayData(res);
        this.loading = false;
      }, error => {
        this.$message({ type: 'error', message: error.error && error.error.message });
        this.tradition = null;
        this.loading = false;
      });
    },
    // 提交 —— 积分设置
    handleSubmitTeamScore() {
      const _this = this;
      _this.submitLoading = true;
      _this.$refs['refTradition'].validate(valid => {
        if (valid) {
          const _form = JSON.parse(JSON.stringify(_this.tradition));
          for (const i in _form) {
            _this.submitPointSettingInput.push(_form[i]);
          }
          api_PUT_EventsManagementPointSetting({ tradition: _this.submitPointSettingInput }).then(res => {
            _this.submitLoading = false;
            _this.tradition = {};
            _this.submitPointSettingInput = [];
            // 编辑成功再获取数据做回显
            _this.getPointSetting();
            _this.$message({ type: 'success', message: '操作成功！' });
          }, error => {
            _this.submitLoading = false;
            _this.submitPointSettingInput = [];
            _this.$message({ type: 'error', message: error.error.message || '提交失败' });
          });
        } else {
          _this.submitLoading = false;
        }
      });
    },
    processDisplayData(res) {
      const _this = this;
      if (res.tradition.length > 0) {
        for (let i = 0; i < res.tradition.length; i++) {
          const item = res.tradition[i];
          _this.$set(_this.tradition, i, item);
        }
      } else {
        _this.tradition = null;
      }
    }
  }
};
</script>

